<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="css/index.css" />
  </head>

  <body>
    <header>
      <h1>订单情况展示</h1>
<!--这个是随便设置的时间，下面会根据这个格式实时的运转-->
      <div class="showTime">当前时间：2020年3月17-0时54分14秒</div>
    </header>
    <section class="mainbox" id="main">
      <div class="column">
        <div class="panel bar">
          <h2>
            排行榜 <a href="javascript:;">出版社</a>
            <a href="javacript:;"> 图书</a>
          </h2>
          <div class="chart"></div>
          <div class="panel-footer"></div>
        </div>
      </div>
      <div class="column">
        <div class="no">
          <div class="no-hd">
            <ul>
              <li class="TotalMoney">0</li>
              <li class="TotalSale">0</li>
              <li class="TotalNum">0</li>
            </ul>
          </div>
          <div class="no-bd">
            <ul>
              <li>销售总金额(万元)</li>
              <li>销售订单数</li>
              <li>总销量(本)</li>
            </ul>
          </div>
        </div>
        <div class="map">
          <div class="chart"></div>
          <div class="map1"></div>
          <div class="map2"></div>
          <div class="map3"></div>
        </div>
      </div>
      <div class="column">
        <div class="panel bar1">
          <h2>速度</h2>
          <div class="chart"></div>
          <div class="panel-footer"></div>
        </div>
        <div class="panel pie1">
          <h2>省份排行</h2>
          <div class="chart"></div>
          <div class="panel-footer"></div>
        </div>
      </div>
    </section>
    <script src="js/flexible.js.php"></script>
    <script src="js/jquery.js"></script>
    <script src="js/echarts.min.js"></script>
    <script src="js/index.js.php"></script>
    <script src="js/china.js"></script>
    <script src="js/myMap.js.php"></script>
  <script>
    var t1 = null;
    t1 = setTimeout(total, 1000); //開始运行
    function total() {
      clearTimeout(t1); //清除定时器
      var total1=null;
      var total2=null;
        var total3=null;
      function TestAjax() {
        $.ajax({
          type: "post",
          async: false,
          url: "connect/Total_amount.php",
          data: {},
          dataType: "json",
          success: function (result) {
            if (result) {
              for (var i = 0; i < result.length; i++) {
                if (result[i].name === "总金额") {
                  total1 = result[i].value;
                } else if (result[i].name === "订单数量") {
                  total2 = result[i].value;
                }
              }
            }
          },
          error: function(errmsg) {
            alert("Ajax获取服务器数据出错了！"+ JSON.stringify(errmsg));
          }
        })
          $.ajax({
              type: "post",
              async: false,
              url: "connect/Total_sales.php",
              data: {},
              dataType: "json",
              success: function (result) {
                  if (result) {
                      total3=result[0].value;
                  }
              },
              error: function(errmsg) {
                  alert("Ajax获取服务器数据出错了！"+ JSON.stringify(errmsg));
              }
          })
        return total1,total2,total3;
      }
      total1,total2,total3=TestAjax();
      document.querySelector(".TotalSale").innerHTML =total2;
      document.querySelector(".TotalMoney").innerHTML =(Number(total1)/10000).toFixed(2);
        document.querySelector(".TotalNum").innerHTML =total3;
      t1 = setTimeout(total, 1000); //设定定时器，循环运行
    }
  </script>
    <script>
        var t = null;
        t = setTimeout(time, 1000); //開始运行
        function time() {
            clearTimeout(t); //清除定时器
            dt = new Date();
            var y = dt.getFullYear();
            var mt = dt.getMonth() + 1;
            var day = dt.getDate();
            var h = dt.getHours(); //获取时
            var m = dt.getMinutes(); //获取分
            var s = dt.getSeconds(); //获取秒
            document.querySelector(".showTime").innerHTML =
                "当前时间：" +
                y +
                "年" +
                mt +
                "月" +
                day +
                "-" +
                h +
                "时" +
                m +
                "分" +
                s +
                "秒";
            t = setTimeout(time, 1000); //设定定时器，循环运行
        }
    </script>
  </body>
</html>
